import React, { Component } from 'react'
 // 1.创建上下文对象
const ThemeContext = React.createContext()
// Context 跨组件传值
// https://zh-hans.reactjs.org/docs/context.html
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。
// React.createContext
// Context.Provider
// Class.contextType
// Context.Consumer
// Context.displayName
class MyButton extends Component {
  // 3. 如果是类组件
  //  3.1 给类添加 静态的属性 contextType = 上下文对象
  //  3.2 可以使用 上下文对象.Consumer 获取值,需要写成 函数的形式，函数的参数就是祖先组件提供的数据
  render () {
    return (
      <button>
        {/* 
          jsx 中写注释语句其实就是js的注释添加{}
        */}
        按钮 - 
        <ThemeContext.Consumer>
          {
            value => {
              return <span>{value}</span>
            }
          }
        </ThemeContext.Consumer>
      </button>
    )
  }
}
class ToolBar extends Component {
  render () {
    return (
      <MyButton></MyButton>
    )
  }
}
export default class App extends Component {
 
  render() {
    // 2.在顶级组件中通过 上下文对象的 Provider 对象配合value 传值，记住，传值只能使用 value属性
    return (
      <div>
        <ThemeContext.Provider value = 'dark'>
          <ToolBar />
        </ThemeContext.Provider>
      </div>
    )
  }
}
 